<template>
  <main class="c-topic">
    <section :class="['c-topic_item', { 'superleague-info__background' : superLeagueShow }]" v-if="media" >
      <panoramic-video :para="superLeagueData" v-if="!media.isChargeable && media.videoPath && media.videoPath.length>0"></panoramic-video>
      <template v-else>
        <div class="c-topic_brand viewmedia dynaprogram" :style="mediaBigPic">
          <img :src="media.bigImage" class= "toptic-media " >              
          <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.snailvr.manager&ckey=CK1340670182054" class="recommend-play_icon"></a>
        </div>
        <section :class="['alone-btn_wrapper' , { 'noneBackground' : superLeagueShow }]" v-if="media.isChargeable">
          <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.snailvr.manager&ckey=CK1340670182054" class="button along_btn charges">购买节目观看劵 ¥{{ media.price/100 }}</a>
        </section>
        <section :class="['alone-btn_wrapper' , { 'noneBackground' : superLeagueShow }]" v-else>
          <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.snailvr.manager&ckey=CK1340670182054" class="button along_btn">前往APP改变剧情发展</a>
        </section>
      </template>
      <div :class="['mes-box', { 'superleague': superLeagueShow }]" >          
        <h2 class="mes-box_title js-mesbox_title" >
          <span class="itemtitle">{{media.title}}</span>
          <span class="mes-play_score"><i class="icon-star " :class="`icon-star${media.scoreSeries}`"></i>{{media.score}}分</span>
        </h2>
        <p class="mes-box_labels">
          <span class="playcount"><i class="icon icon-playcount"></i>{{media.playCount}}次播放</span>
          <span class="label" v-for="tag in media.tags" >#{{tag}}</span>
        </p>
        <hr class="horizontal-line_gray" :data-test="`gray${media.playCount}`"/>
        <sharepage-intro :intro="media.intro" :class="['js-mesbox_mes', { 'superleague-intro': superLeagueShow }]" v-if="media.intro"></sharepage-intro>
      </div>
      <global-footer :class="superLeagueShow ? 'super-league' : '' "></global-footer>   
    </section>
    <div v-else class="err-tip-contain">
      <div class="spinner" v-if="loading"></div>        
      <p v-else>地址错误，请访问正确地址</p>
    </div>
    <global-footer v-if="!media"></global-footer> 
  </main>
</template>
<script >
  import setFalse from 'ployfill/';
  import { sharewx } from 'services/sharewx';
  import film from 'services/dynaprogram';
  import GlobalFooter from 'components/global-footer';
  import SharepageIntro from 'pages/components/sharepage-intro';
  import PanoramicVideo from 'pages/components/panoramic-video';
  
  export default {
    components: { GlobalFooter, SharepageIntro, PanoramicVideo },
    data () {
      return {
        media: null,
        mediaBigPic: {
          backgroundImage: ''
        },
        type: '',
        loading: true,
        superLeagueShow: false,
        superLeagueData: {
          src: '',
          poster: ''
        },
        picPath: '0'
      };
    },
    computed: {
      textFontWidth () {
        const contentWidth = document.documentElement.clientWidth || document.body.clientWidth;
        return (contentWidth * 36 / 1080);
      }
    },
    mounted () {
      this.textWidth = this.getTextContentWidth();
      const errorIOS = this.isIOS9();
      film.get().then((data) => {
        this.loading = false;
        if (data) {
          this.media = data;
          if (this.media.intro.length > Math.floor((this.textWidth / this.textFontWidth) * 6)) {
            this.media.intro = this.media.intro.slice(0, Math.floor((this.textWidth / this.textFontWidth) * 6) - 12).concat('...');
          }
          if (errorIOS) {
            this.media.videoPath = null;
          }
          if (data.tagCode && data.tagCode.trim() === 'lw_zhongchao') {
            this.superLeagueShow = true;
          }
          this.setWxAndSeo(this.media);
          if (data.videoPath) {
            this.superLeagueData.src = data.videoPath;
            this.superLeagueData.poster = data.bigImage;
          }
        } else {
          this.media = null;
        }
      }).catch(() => {
        this.loading = setFalse();
      });
    },
    methods: {
      getTextContentWidth () {
        const contentWidth = document.documentElement.clientWidth || document.body.clientWidth;
        const mesbox = document.querySelector('.js-mesbox_mes');
        if (mesbox) {
          return mesbox.clientWidth;
        }
        return contentWidth;
      },
      setWxAndSeo (data) {
        this.type = data.videoType === 'vr' ? '全景' : (data.videoType === '3d' ? '3D' : '2D');
        this.mediaBigPic.backgroundImage = `url(${data.bigImage})`;
        document.title = `VR视频 | ${data.title}`;
        document.head.querySelector('meta[name="description"]').content = data.intro;
        sharewx({
          title: data.title,
          imgUrl: data.smallImage,
          desc: data.intro
        });
      },
      isIOS9 () {
        const model = /iP[hone|ad]+/ig;
        // const version = /iPhone\s+OS\s+11/ig;
        const versionSmall = /iPhone\s+OS\s+[9|8]/ig;
        const targetSTR = window.navigator.appVersion;
        return model.test(targetSTR) && (versionSmall.test(targetSTR));
      }
    }
  };
</script>
<style lang="scss" scoped>
  .c-topic_brand.dynaprogram {
    &::before {
      position: absolute;
      content: '互动剧';
      color: #fff;
      font-size: .36rem;
      text-align: center;
      line-height: .74rem;
      right: 0;
      top: 0;
      width: 1.56rem;
      height: .72rem;
      z-index: 2;
      background: url('~common/images/dynaprogram-label.png') no-repeat right top;
      background-size: cover;
    }
  }
  .c-topic_item {
    overflow: hidden;
    position: relative;
    width: 100%;
    overflow: hidden;
    &.superleague-info__background {
      background: url('~common/images/super-view-background.jpg') repeat-y left top;
      background-size: 100% auto;      
    }
  }
  .mes-box {
    position: relative;

    &.superleague {
      position: relative;
      min-height: 4.5rem;
      background: url('~common/images/super-view-background-cover.png') no-repeat left top;
      background-size: 100% auto;
      .mes-box_title {
        color: #fff;
        font-size: .51em;
      }
      .mes-box_labels{
        .icon-playcount {
          background-image: url('~common/images/icon_play_zhongchao.png');
        }
        .playcount {
          color: #fff;
          opacity: .7;
        }
        .label {
          color: #fef93d;
        }
      }
      .mes-box_mes.superleague-intro {
        color: #fff;
        font-size: .33em;
      }
      .horizontal-line_gray {
        margin-top: .1525rem;
        margin-left: -.42rem;
        margin-right: -.42rem;
        background-color: rgba(24, 64, 14, 0);
        opacity: 0;
      }
    }
  }
  .alone-btn_wrapper {    
    padding: .28rem 0;
    text-align: center;
    font-size: 0;
    background-color: #fff;
    &.noneBackground {
      display: none;
      background: transparent;
    }
  }
  .along_btn {
    width: 90%;
    color: white;
    background-color: #34b1fe;
    padding: .7em 1.35em .6em;
    text-align: center;
    font-size: .42rem;
    border-radius: .1rem;
    &.charges {
      color: #fff;
      background-color: #ff3e3e; 
    }  
  }
</style>
